<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <!-- 
    this
    1.作为普通函数调用   ==》 window
    2.作为构造函数调用   ==》 new出来的实例对象
    3.作为对象方法被调用 ==》 调用者对象
    4.使用call、apply、bind调用  ---》穿进去的参数
    5.在箭头函数中调用     ==》指向外层作用域的 this
对箭头函数使用 call apply bind 不会改变箭头函数的 this 指向，也不会报错，箭头函数没有this。
this取什么值，是在函数执行的时候确定的，而不是在函数定义的时候确定的。
-->
  <script>
    let obj1 = {
      name: "obj1",
      fn1() {
        console.log(this);
      },
    };
    let obj2 = {
      name: "obj2",
      fn1() {
        setTimeout(() => {
          console.log(this);
        });
      },
    };
    let obj3 = {
      name: "obj3",
      fn1() {
        setTimeout(function () {
          console.log(this);
        });
      },
    };
    obj1.fn1();
    obj2.fn1();
    obj3.fn1();
  </script>
</html>
